<template>
    <section class="add-container wrapper">

        <el-row :gutter="20">
            <el-col :span="18" class="cms-form-box">

                <el-row>
                    <el-col>
                        <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="120px" class="cms-form">

                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="所属站点">
                                        <el-input v-model="siteFullName" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="上级栏目" prop="content.channelId">
                                        <el-cascader
                                                placeholder="所属上级"
                                                :props="{'label': 'channelName', 'value': 'id', 'children': 'children'}"
                                                clearable
                                                change-on-select
                                                v-model="selectedOptions"
                                                :options="options"
                                                @change="handleChange"
                                                style="width: 100%">
                                        </el-cascader>
                                    </el-form-item>

                                </el-col>

                            </el-row>

                            <el-form-item label="文章标题" prop="contentExt.title" >
                                <el-input v-model="form.contentExt.title"></el-input>
                            </el-form-item>

                            <el-row :gutter="16">
                                <el-col :span="16">
                                    <el-form-item label="简短标题">
                                        <el-input v-model="form.contentExt.shortTitle"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="1">
                                    <el-color-picker v-model="form.contentExt.titleColor"></el-color-picker>
                                </el-col>
                                <el-col :span="3">
                                    <el-form-item label-width="30px">
                                        <el-checkbox v-model="form.contentExt.isBold" size="small">是否加粗</el-checkbox>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <!--<el-row :gutter="20">
                                <el-col :span="21">
                                    <el-form-item label="Tag标签">
                                        <el-select v-model="form.tags" multiple placeholder="请选择" style="width: 100%">
                                            <el-option
                                                    v-for="item in tagOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3">
                                    <el-button @click="createTag">创建标签</el-button>
                                </el-col>
                            </el-row>-->

                            <el-form-item label="摘要">
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 3, maxRows: 3}"
                                        placeholder="请输入内容"
                                        v-model="form.contentExt.summary">
                                </el-input>
                            </el-form-item>

                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="作者">
                                        <el-input v-model="form.contentExt.author"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="来源">
                                        <el-input v-model="form.contentExt.origin"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="来源地址">
                                        <el-input v-model="form.contentExt.originUrl"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="内容类型">
                                        <el-select v-model="form.contentExt.contentImg" placeholder="请选择" style="width: 100%">
                                            <el-option
                                                    v-for="item in tagOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="发布时间">
                                        <el-date-picker
                                                v-model="form.contentExt.releaseDate"
                                                type="datetime"
                                                placeholder="选择日期时间"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                style="width: 100%"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="归档日期">
                                        <el-date-picker
                                                v-model="form.contentExt.pigeonholeDate"
                                                type="date"
                                                placeholder="选择日期"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                style="width: 100%"
                                        >
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>

                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="指定模板">
                                        <el-select v-model="form.contentExt.tplContent" placeholder="请选择" style="width: 100%">
                                            <el-option
                                                    v-for="item in tagOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="8">
                                    <el-form-item label="手机模板">
                                        <el-select v-model="form.contentExt.tplMobileContent" placeholder="请选择" style="width: 100%">
                                            <el-option
                                                    v-for="item in tagOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item label="附件">
                                <el-button type="primary" size="small">批量上传</el-button>
                            </el-form-item>

                            <el-form-item label="多媒体">
                                <el-button type="primary" size="small">批量上传</el-button>
                            </el-form-item>

                            <el-form-item label="内容">
                                <u-editor :id="editorId" :defaultMsg="defaultMsg" :config="config" ref="ue"></u-editor>
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>

            </el-col>

            <el-col :span="6">

                <el-row class="margin-bottom-10">
                    <el-col>
                        <a class="back" href="javascript:void(0)" @click="back"></a>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span class="card-header"><i class="el-icon-search"></i> 发布</span>
                            </div>
                            <el-row class="publish-card">
                                <el-col>

                                    <el-row class="margin-bottom-5">
                                        <el-col>
                                            <span class="text">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                                            <el-select v-model="form.content.status" placeholder="请选择" size="small">
                                                <el-option
                                                        v-for="item in statusOptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                        >
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-5">
                                        <el-col>
                                            <span class="text">固顶级别：</span>
                                            <el-input-number v-model="form.content.topLevel" :min="1" :max="100" size="small" style="width: 200px"></el-input-number>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-5">
                                        <el-col style="padding: 10px 0">
                                            <span class="text">是否推荐：</span>
                                            <el-checkbox v-model="form.content.isRecommend" size="small">是</el-checkbox>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-5" v-if="this.form.content.isRecommend">
                                        <el-col>
                                            <span class="text">推荐级别：</span>
                                            <el-input-number v-model="form.content.recommendLevel" :min="1" :max="100" size="small" style="width: 200px"></el-input-number>
                                        </el-col>
                                    </el-row>

                                    <el-row class="footer">
                                        <el-col>
                                            <el-button v-if="this.params.contentId == null" @click="handleCreate" type="primary" size="small" icon="el-icon-search">提 交</el-button>
                                            <el-button v-if="this.params.contentId != null" @click="handleUpdate" type="primary" size="small" icon="el-icon-search">修 改</el-button>
                                            <el-button plain type="info" size="small">预 览</el-button>
                                        </el-col>
                                    </el-row>

                                </el-col>
                            </el-row>

                        </el-card>
                    </el-col>
                </el-row>

                <el-row class="margin-bottom-10">
                    <el-col>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>分类</span>
                            </div>
                            <div v-for="o in 4" :key="o" class="text item">
                                {{'列表内容 ' + o }}
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row class="margin-bottom-10">
                    <el-col>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>标签</span>
                            </div>
                            <div v-for="o in 4" :key="o" class="text item">
                                {{'列表内容 ' + o }}
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

            </el-col>
        </el-row>


        <back-to-top></back-to-top>
    </section>
</template>

<script>
    import { selectOne as selectOneSite } from '@/api/cms/site'
    import { selectTree, getParents } from '@/api/cms/channel'
    import { created, updated, selectOne } from '@/api/cms/content'
    import valid from '@/rules'
    import BackToTop from "../../../components/BackToTop/index";
    import UEditor from "../../../components/editor/Ueditor";

    const statusOptions = [{
        value: 0,
        label: '草稿'
    }, {
        value: 1,
        label: '审核中'
    }, {
        value: 2,
        label: '审核通过'
    }, {
        value: 3,
        label: '回收站'
    }, {
        value: 4,
        label: '投稿'
    }, {
        value: 5,
        label: '归档'
    }]

    const tagOptions = [{
        value: '选项1',
        label: '黄金糕'
    }, {
        value: '选项2',
        label: '双皮奶'
    }, {
        value: '选项3',
        label: '蚵仔煎'
    }, {
        value: '选项4',
        label: '龙须面'
    }, {
        value: '选项5',
        label: '北京烤鸭'
    }]

    export default {
        components: {
            UEditor,
            BackToTop},
        name: 'add',
        data() {
            let required = valid.required('此项必填')
            return {
                /**
                 * siteId
                 * channelId
                 * contentId
                 */
                params: this.$route.query, //前一个页面带过来的数据
                form: {
                    content: {
                        siteId: null,
                        channelId: null,
                        status: 2,
                        topLevel: null,
                        isRecommend: null,
                        recommendLevel: null,
                    },
                    contentExt: {
                        title: null,
                        shortTitle: null,
                        author: null,
                        origin: null,
                        originUrl: null,
                        summary: null,
                        releaseDate: null,
                        mediaPath: null,
                        mediaType: null,
                        titleColor: null,
                        isBold: null,
                        titleImg: null,
                        contentImg: null,
                        typeImg: null,
                        link: null,
                        tplContent: null,
                        needRegenerate: null,
                        tplMobileContent: null,
                        toplevelDate: null,
                        pigeonholeDate: null,
                    },
                    contentTxt: {
                        txt: null
                    }
                },
                siteFullName: null,
                loading: false,
                options: [],
                selectedOptions: [],
                editorId: 'ue',
                defaultMsg: '',
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350
                },
                rules: {
                    title: [required],
                    channelId: [required]
                },
                tagOptions,
                statusOptions
            }
        },
        created() {
            this.form.content.channelId = this.params.channelId
            this.getSite()
            this.getChannelTree()

            if(this.params.contentId) {
                selectOne(this.params.contentId).then(response => {

                    Object.assign(this.form, response.data)
                    Object.assign(this.form.content, response.data)
                    delete this.form.content.contentExt
                    delete this.form.content.contentTxt

                    if(this.form.contentTxt.txt) {
                        this.defaultMsg = this.form.contentTxt.txt
                    }
                })
            }
        },
        methods: {
            back() {
                this.$router.go(-1)
                this.$store.dispatch('SetSidebar', true)   //收起侧边栏
            },
            handleChange(value) {//设置上级栏目
                if(value.length > 0) {
                    this.form.content.channelId = value[value.length-1]
                } else {
                    this.form.content.channelId = null
                }
            },
            getSite() {
                let siteId = this.params.siteId
                if(siteId) {
                    selectOneSite(siteId).then(response => {
                        this.form.content.siteId = response.data.id
                        this.siteFullName = response.data.siteFullName
                    })
                }
            },
            getChannelTree() {//获取上级栏目数据列表
                let params = this.params
                this.loading = true
                selectTree().then(response => {
                    this.options = response.data
                }).then(() => {
                    //编辑状态下回填上级栏目数据
                    if(params.channelId) {
                        getParents({id: params.channelId}).then(response => {
                            this.selectedOptions = response.data
                            if(response.data.reverse().length === 0) {
                                this.selectedOptions = [parseInt(params.channelId)]
                            }

                        })
                    }
                })
                this.loading = false
            },
            handleCreate() {


                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        this.form.contentTxt.txt = this.$refs.ue.getUEContent(); // 调用子组件方法

                        created(this.form).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                                this.back()
                            } else {
                                this.$notify({
                                    title: '操作失败', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }
                })
            },

            handleUpdate() {
                let content = this.$refs.ue.getUEContent(); // 调用子组件方法

                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        this.form.contentTxt.txt = content

                        updated(this.form).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                                this.back()
                            } else {
                                this.$notify({
                                    title: '操作失败', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }
                })
            },
            createTag() { //创建标签

            }
        },
        mounted() {
            this.$nextTick(function () {
                this.$store.dispatch('SetSidebar', false)   //收起侧边栏
            })
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .wrapper{
        padding: 0 10px;
        transition: all .2s ease-in-out;
        .cms-form-box{
            border: 1px solid #e9eaec;
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            position: relative;
            transition: all .2s ease-in-out;
            padding: 20px 0;
            .cms-form{
                width: 95%;
            }
        }
    }

    .box-card{
        .card-header{
            font-weight: bold;
            font-size: 14px;
        }
        .publish-card{
            .text{
                display: inline-block;
                width: 70px;
            }
            .footer{
                width: 100%;
                text-align: right;
                border-top: 1px solid #e9eaec;
                padding-top: 10px;
            }
        }
    }


</style>